<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${roomName} + '-在线聊天室'"></title>

    <meta name="author" content="Erwin Feng"/>
    <meta name="keyword" content="在线聊天室"/>
    <meta name="description" content="在线聊天室"/>

    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


    <link rel="stylesheet" th:href="'/static/lib/layui/css/layui.css?v=' + ${version}">
    <link rel="stylesheet" th:href="'/static/css/chat.css?v=' + ${version}">
    <script th:src="'/static/lib/layui/layui.js?v=' + ${version}"></script>

    <script th:src="'/static/util/Variable.js?v=' + ${version}"></script>
    <script th:src="'/static/util/Utils.js?v=' + ${version}"></script>
    <script th:src="'/static/util/CacheUtils.js?v=' + ${version}"></script>
    <script th:src="'/static/util/LayerUtils.js?v=' + ${version}"></script>

    <script th:inline="javascript">
        let error = [[${error}]];
        let msg = [[${msg}]];

        let rid = [[${rid}]];
        let domain = [[${domain}]];
        let needPassword = [[${needPassword}]];

        if (error) {

            if (isNotEmpty(rid)) {
                deleteRoomUserAuthToken(rid);
            }

            layer.alert(
                msg, {icon: 5},
                function () {
                    window.location.href = "/";
                });
        }




        layui.use(function() {
            let layer = layui.layer
                , jQuery = layui.jquery;

            if (needPassword) {
                jQuery('#room-title-lock').show();
            } else {
                jQuery('#room-title-lock').hide();
            }

        });
    </script>

<!--    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>-->
    <script th:src="'/static/lib/js/stomp.min.js?v=' + ${version}"></script>
    <script th:src="'/static/lib/js/sockjs.min.js?v=' + ${version}"></script>

    <script th:src="'/static/util/AjaxUtils.js?v=' + ${version}"></script>
    <script th:src="'/static/js/chat.js?v=' + ${version}"></script>
    <script th:src="'/static/lib/js/html2canvas.min.js?v=' + ${version}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bluebird/3.7.2/bluebird.js"></script>
    <script src="/static/lib/js/jquery.mb.emoticons.js"></script>
</head>
<body>
<header class="header-container">
    <span class="lock"><i class="layui-icon layui-icon-password" id="room-title-lock"></i></span>
    <span class="room-name" th:text="${roomName}">群聊</span>
    (<span id="room-user-count">0</span>)

    <div class="box-btn-invite">
        <button type="button" class="layui-btn  layui-btn-radius layui-btn-xs" onclick="btnClickInvite()">邀请</button>
    </div>
</header>

<div class="main-container">
    <div class="left-container">
        <div class="user-container" id="user-container">
            <!--<div class="box-user">
                <div class="nickname">张三</div>
                <div class="up-time">20:13:10</div>
            </div>-->
        </div>
    </div>
    <div class="right-container">
        <div class="center-container" id="center-container">
            <div class="chat-container" id="chat-container">
                <div></div>
                <!--<div class="box-chat box-chat-time">
                    <div class="time">22:00</div>
                </div>
                <div class="box-chat box-chat-other">
                    <div class="left">
                        <div class="user-header">
                            <div class="img">张</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="user-nickname">张三</div>
                        <div class="user-message">
                            <div class="content">Hello，你好</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>
                <div class="box-chat box-chat-self">
                    <div class="right">
                        <div class="user-header">
                            <div class="img">李</div>
                        </div>
                    </div>
                    <div class="left">
                        <div class="user-message">
                            <div class="content">Hello，你好</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>-->
                <!-- chat test example -->
                <!--<div class="box-chat box-chat-time">
                    <div class="time">22:00</div>
                </div>
                <div class="box-chat box-chat-other">
                    <div class="left">
                        <div class="user-header">
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="user-nickname">张三</div>
                        <div class="user-message">
                            <div class="content">吃饭了吗</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>
                <div class="box-chat box-chat-self">
                    <div class="right">
                        <div class="user-header">
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="left">
                        <div class="user-message">
                            <div class="content">吃了</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>
                <div class="box-chat box-chat-other">
                    <div class="left">
                        <div class="user-header">
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="user-nickname">张三</div>
                        <div class="user-message">
                            <div class="content">你有梦想吗</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>
                <div class="box-chat box-chat-self">
                    <div class="right">
                        <div class="user-header">
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="left">
                        <div class="user-message">
                            <div class="content">我的梦想就是吃饱饭</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>
                <div class="box-chat box-chat-other">
                    <div class="left">
                        <div class="user-header">
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="user-nickname">张三</div>
                        <div class="user-message">
                            <div class="content">你会梦想成真的</div>
                            <div class="bubble"></div>
                        </div>
                    </div>
                </div>-->
            </div>
        </div>
        <div class="form-container">
            <form class="layui-form" action="">
                <input type="text" name="message" required lay-verify="required" autocomplete="off" class="layui-input">
                <div class="emoji-box"><i class="layui-icon layui-icon-face-smile"></i></div>
                <button class="layui-btn" lay-submit lay-filter="formSend">发送</button>
            </form>
        </div>
    </div>

    <div class="layer-box">
        <div class="box-invite">
            <div class="box-invite-container">
                <div class="box-invite-img" id="box-invite-img">
                    <div class="title"><span id="invite-user-nickname">xxx</span>想邀请你加入《<span id="invite-room-name">xxx</span>》房间？</div>
                    <div class="box-img">
                        <img class="qrcode-img" src="" id="inviteQRCodeImg" alt="" width="" />
                    </div>
                    <div class="tip">扫描二维码，进房间一起聊聊吧</div>
                </div>
                <div class="box-btn">
                    <button type="button" class="layui-btn layui-btn-primary btn-download" onclick="btnClickSaveImg()">
                        <i class="layui-icon layui-icon-download-circle"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
</html>